<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>06-22</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
</head>
<!-- contactlist-component 시작 -->
<style>
#list  { width: 400px; border:1px solid black; border-collapse:collapse; }
#list td, #list th { border:1px solid black;  text-align:center; }
#list > thead > tr { color:yellow; background-color: purple; }
</style>
<template id="listTemplate">
    <div>
    <table id="list">
        <thead>
            <tr>
                <th>번호</th><th>이름</th><th>전화번호</th><th>주소</th>
            </tr>
        </thead>
        <tbody id="contacts" >
            <tr v-for="contact in contacts">
                <td>{{contact.no}}</td>
                <td>{{contact.name}}</td>
                <td>{{contact.tel}}</td>
                <td>{{contact.address}}</td>
            </tr>
        </tbody>
    </table>
    </div>
</template>
<script type="text/javascript">
Vue.component('contactlist-component', {
    template : '#listTemplate',
    props : [ 'contacts' ]    
})
</script>
<!-- contactlist-component 끝 -->
<!-- search-component 시작 -->
<template id="searchTemplate">
    <p>
        이름 : <input type="text" v-model.trim="name" :placeholder="placeholder"
                @keyup.enter="keyupEvent" />
    </p>
</template>
<script type="text/javascript">
Vue.component('search-component', {
    template : '#searchTemplate',
    props : [ 'placeholder' ],
    data : function() {
        return { name: ''};
    },
    methods : { 
        keyupEvent : function(e) {
            var val = e.target.value;
            if (val.length >= 2) {
                this.$emit('search', val);
            } else {
                this.$emit('search', '');
            }
        }
    }
})
</script>
<!-- search-component 끝 -->
<!-- search-contact-component 시작 -->
<template id="searchcontactTemplate">
    <div>
        <search-component placeholder="두글자 이상 입력후 엔터!" 
            v-on:search="searchEvent"></search-component>
        <contactlist-component v-bind:contacts="contactlist"></contactlist-component>
        <div v-show="isProcessing === true">조회중</div>
    </div>
</template>
<script type="text/javascript">
Vue.component('search-contact-component', {
    template : '#searchcontactTemplate',
    data : function() {
        return {
            contactlist : [],
            isProcessing : false
        }
    },
    methods : {
        searchEvent : function(name) {
            if (name == '') 
                this.contactlist = [];
            else
                this.fetchContacts(name);
        },
        fetchContacts : _.debounce(function(name) {
            this.contactlist = [];
            this.isProcessing = true;
            var url = "http://sample.bmaster.kro.kr/contacts_long/search/" + name;
            var vm = this;
            fetch(url)
                .then(function(response) {
                    return response.json()
                }).then(function(json) {
                    vm.contactlist = json;
                    vm.isProcessing = false;
                }).catch(function(ex) {
                    console.log('parsing failed', ex);
                    vm.contactlist = [];
                    vm.isProcessing = false;
                })

        }, 300)
    }    
})
</script>
<!-- search-contact-component 끝 -->
<body>

</body>
<script type="text/javascript">
Vue.config.devtools = true;

</script>
</html>
